<template>
  <div class="container">
    <div class="index-title">
      <span v-if="pageModel == 'self'">本单位年度考核</span
      ><span v-else>{{ routeQuery.name }}</span>
    </div>
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="16" align="left">
        <el-input
          v-model="searchFrom.companyName"
          placeholder="公司名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExportBtn()" v-limit="'KHGL:KJKH:ZZKJKH:BDWNDKHGL:EXPORT'">批量导出</el-button>
        <el-button class="lock" @click="stopExamine()" v-if="pageModel !== 'self'"  v-limit="'KHGL:KJKH:ZZKJKH:BDWNDKHGL:ENDEXAMINE'"
          >结束考核</el-button
        >
        <el-button type="primary" @click="updateScore()" v-limit="'KHGL:KJKH:ZZKJKH:BDWNDKHGL:UPDATEGRADES'">更新成绩</el-button>
        <el-button type="primary" @click="warningBtn()" v-if="pageModel !== 'self'"   v-limit="'KHGL:KJKH:ZZKJKH:BDWNDKHGL:REMIND'"
          >预警提醒</el-button
        >
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="state.table_list"
        style="width: 100%"
        @selection-change="selectionChange"
        v-loading="state.table_loading"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :reserve-selection="false"
        />
        <el-table-column type="index" :index="indexMethod" align="center" width="80" label="序号" />
        <el-table-column
          prop="examineName"
          align="center"
          width="200"
          label="考核名称"
          v-if="pageModel == 'self'"
        />
        <el-table-column
          prop="companyName"
          align="center"
          v-else
          width="200"
          label="子公司名称"
        />
        <el-table-column
          prop="age"
          align="center"
          label="年度"
          v-if="pageModel == 'self'"
          width="80"
        />
        <el-table-column prop="indexCounts" align="center" label="指标数量" />
        <el-table-column
          prop="examineFactor"
          align="center"
          label="考核系数"
          v-if="pageModel == 'every'"
        >
        </el-table-column>
        <el-table-column prop="planTotalScore" align="center" label="计划总得分">
        </el-table-column>
        <el-table-column prop="totalFinalScore" align="center" label="最终得分" />
        <el-table-column
          prop="totalAddScore"
          align="center"
          label="已得加分"
          width="80"
        />
        <el-table-column
          prop="totalSubScore"
          align="center"
          label="已得扣分"
          width="80"
        />
        <el-table-column
          prop="totalSAddScore"
          align="center"
          label="专项附加"
          width="80"
        />
        <el-table-column
          prop="startDatetime"
          align="center"
          label="考核开启时间"
          width="150"
        />
        <el-table-column
          prop="endDatetime"
          align="center"
          label="考核结束时间"
          width="150"
        />
        <el-table-column prop="status_text" align="center" label="状态" width="100">
          <template #default="scope">
            <span :class="['examinePStatus-' + scope.row.status]">{{
              scope.row.status_text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" fixed="right" label="操作" width="120">
          <template #default="scope">
            <span>
              <el-button type="primary" @click="goDetail(scope.row)"  v-limit="'KHGL:KJKH:ZZKJKH:BDWNDKHGL:LOOKDETAIL'">查看</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
    <el-dialog v-model="state.warningVisible" title="预警提醒" width="1000px">
      <div class="examine-dialog-content">
        <el-row>
          <el-col :span="11">
            <div style="padding-bottom: 10px">预警单位选择：</div>
            <el-table
              :data="state.companyTableData"
              style="width: 100%"
              @selection-change="companyChange"
              height="350px"
            >
              <el-table-column type="selection" align="center" width="80" />
              <el-table-column label="公司名" prop="companyName" />
            </el-table>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <div style="padding-bottom: 10px">预警指标选择：</div>
            <el-table
              :data="state.indexTablelist"
              style="width: 100%"
              row-key="id"
              @selection-change="indexChange"
              height="350px"
            >
              <el-table-column
                type="selection"
                align="center"
                :reserve-selection="false"
                width="80"
              />
              <el-table-column label="指标名" prop="name"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div style="color: #f56c6c; padding-top: 10px">
          *当已选择的单位未完成已选择的计分指标计划分数时（其年度计划中包含该指标），则发出预警提醒。
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.warningVisible = false">关闭</el-button>
          <el-button type="primary" @click="confirmWarning"> 发送预警 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import pubFc from "@/views/examineManage/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getCompanyListRequest, getZzindexListRequest } from "../../../api/examineManage";
import * as api from "../../../api/zJexaminePlan";
interface Cdata {
  [propName: string]: any;
}
const searchFrom = reactive({
  //查询
  companyName: "",
});
// const refreshPage:any=inject('refreshPage', Function, true);
const pageModel = ref("");
const route = useRoute();
pageModel.value = route.path=='/examineManage/techExamine/zzExamine/sUnitExamine'?'self':'every'
const router = useRouter();
const routeQuery = route.query;

const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
let state = reactive<Cdata>({
  table_list: [],
  handleRowData: null, //正在处理的行数据
  table_loading: false,
  company_list: [],
  warningVisible: false,
  companyTableData: [], //
  indexTablelist: [],
  selCompanyList: [],
  selIndexList: [],
});
let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const getExportBtn = () => {
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //批量导出
    let apiName =
      pageModel.value == "self" ? "exportSelfExRequest" : "exportZzplanlsitRequest";
    api[apiName]({
      current: pageOption.current,
      size: pageOption.size,
      produceId: routeQuery.pid,
      ...searchFrom,
      examineFlag: true, //ture-考核，false-计划
    }).then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const companyChange = (value) => {
  //
  state.selCompanyList = value;
};
const indexChange = (value) => {
  state.selIndexList = value;
};
const goDetail = (row) => {
  //进入考核详情
  let name = "",
    path = "";
  if (pageModel.value == "self") {
    name = `${row.examineName}`;
    path = "/examineManage/techExamine/zzExamine/exSDetail";
  } else {
    name = `${routeQuery.name}-${row.companyName}`;
    path = "/examineManage/techExamine/zzExamine/exEDetail";
  }

  router.push({
    path: path,
    query: {
      id: row.id,
      name: name,
    },
  });
};

const stopExamine = () => {
  //结束考核
  if (confirmSelected()) {
    ElMessageBox.confirm("确认结束考核吗", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      api
        .stopExamineRequest({
          id: selectedRows.value[0].id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage.success("已结束考核");
            gettargetlist();
          }
        });
    });
  }
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const confirmSelected = () => {
  if (selectedRows.value.length !== 1) {
    ElMessage({
      message: `请选择一条数据！`,
      type: "warning",
    });
    return false;
  } else {
    return true;
  }
};
const updateScore = () => {
  //更新成绩
  if (confirmSelected()) {
    api
      .updateScoreRequest({
        id: selectedRows.value[0].id,
      })
      .then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("已更新");
          gettargetlist();
        }
      });
  }
};
const warningBtn = () => {
  ElMessageBox.confirm("确定要预警提醒吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //预警提醒
    state.warningVisible = true;
    getAnnualIndex();
    getCompanylist();
  });
};
const confirmWarning = () => {
  //确认发送预警

  let companyIds = state.selCompanyList.map((item) => {
    return item.id;
  });
  let indexIds = state.selIndexList.map((item) => {
    return item.id;
  });

  api
    .warnRemindRequest({
      annualId: routeQuery.aid,
      companyIds: companyIds,
      indexIds: indexIds,
    })
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success("已发送预警");
        state.warningVisible = false;
      }
    });
};
const getAnnualIndex = () => {
  //获取年度指标列表
  state.indexTablelist = [];
  getZzindexListRequest({
    annualId: routeQuery.aid,
  }).then((res) => {
    state.indexTablelist = res.data.data;
  });
};
const getCompanylist = () => {
  getCompanyListRequest({}).then((res) => {
    state.companyTableData = res.data.data;
  });
};
const gettargetlist = () => {
  //获取table列表
  // pageLocalListRequest
  state.table_loading = true;
  let apiName =
    pageModel.value == "self" ? "pageLocalListRequest" : "childrenPlanlistRequest";
  api[apiName]({
    ...searchFrom,
    examineFlag: true, //考核页标识
    produceId: routeQuery.pid, //1-中交标准指标、2-中咨标准指标
    current: pageOption.current,
    size: pageOption.size,
  }).then((res) => {
    state.table_loading = false;
    state.table_list = res.data.data.records;
    pageOption.total = res.data.data.total;
  });
};

gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
  .index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
}
.examine-dialog-content {
  padding: 20px;
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
